<template>
	<view class="details" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar backgroundColor="#fff"></nav-bar>
		<view class="header-bar" :style="{ paddingTop: paddingHeight + 'px' }">
			<view class="date_m" @click="showCalendar = true">
				<text>{{ currentSearchTime | dayFn }}</text>
				<u-icon name="arrow-down" color="#1F2434" size="13"></u-icon>
			</view>
			<view class="date_w">
				<view
					class="date-item"
					:class="{ active: weekDayIndex == index }"
					v-for="(item, index) in weekDayList"
					:key="index"
					@click="handleClickWeekDay(item, index)"
				>
					<view class="text">{{
						item.day == today ? '今' : item.weekDay
					}}</view>
					<view class="num">{{ item.day }}</view>
				</view>
			</view>
		</view>
		<view class="days_l">
			<view v-if="dataList.length">
				<view
					class="item"
					v-for="(item, index) in dataList"
					:key="index"
					@click="goRemark(item)"
				>
					<view class="info">
						<view class="i_t">
							<view class="info-l">
								<view class="time">
									<text>{{ item.measureTime }}</text>
								</view>
								<view class="tag">
									{{ item.type }}
								</view>
							</view>
							<view
								class="level"
								:style="{
									backgroundColor: getBgColor(item.rerLevel)
								}"
							>
								等级{{ item.rerLevel }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty
				text="暂无数据"
				width="100"
				height="100"
				icon="http://oss.antaimedical.com/images/pro/2025/03/67d931b8e4b0d615350f315d4e8O2MSrFJ2ae78d945bacfe324df54cef40f90b690c.png"
				v-else
			>
			</u-empty>
		</view>
		<my-calendar
			:monthNum="24"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate"
			:minDate="minDate"
			:show="showCalendar"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar = false"
		></my-calendar>
	</view>
</template>

<script>
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import { findMeasureRecord } from '@/api/index.js'
import { getItemColor, weekComputedfn } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCalendar
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			title: '',
			dataList: [],
			page: 1,
			totalPage: 1,
			weekDayList: [],
			today: '',
			weekDayIndex: '',
			daysList: [],
			currentSearchTime: '',
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			showCalendar: false // 日历控件显示
		}
	},
	filters: {
		dayFn(val) {
			return dayjs(val).format('YYYY年MM月DD日')
		}
	},
	onLoad(OPTIONS) {
		this.weekDayList = weekComputedfn()
		this.today = dayjs().format('DD')
		this.weekDayList.forEach((item, index) => {
			if (this.today == item.day) {
				this.weekDayIndex = index
			}
		})
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = dayjs().format('YYYY/MM/DD')
		this.defaultDate[0] = OPTIONS.date
	},
	onShow() {
		this.dataList = []
		this.page = 1
		this.fetchData()
	},
	onReachBottom() {
		this.fetchData()
	},
	methods: {
		async fetchData() {
			uni.showLoading({
				title: '加载中...'
			})
			let params = {
				page: this.page,
				size: 1000,
				time: this.defaultDate[0],
				userId: this.userId
			}
			try {
				const res = await findMeasureRecord(params)
				if (res.code == 200) {
					this.dataList = res.data.list
					this.totalPage = res.data.totalPage
				}
			} catch (e) {
				//TODO handle the exception
			}
			uni.hideLoading()
		},
		handleClickWeekDay(item, index) {
			this.currentSearchTime = item.day2
			this.weekDayIndex = index
			this.defaultDate[0] = dayjs(item.day2).format('YYYY-MM-DD')
			this.fetchData()
		},
		// 选择日期
		selectDate(e) {
			let str = dayjs(e[0]).format('YYYY/M/DD')
            this.weekDayList = weekComputedfn(str)
			this.weekDayList.forEach((item, index) => {
				if (str == item.day2) {
					this.weekDayIndex = index
				}
			})
			this.defaultDate[0] = e[0]
			this.currentSearchTime = dayjs(e[0]).format('YYYY/MM/DD')
			this.fetchData()
			this.showCalendar = false
		},
		goRemark(info) {
			uni.navigateTo({
				url: `/pagesA/health/analyse/remark/index?id=${
					info.id
				}&rerLevel=${info.rerLevel}&type=${info.type}&measureTime=${
					info.measureTime
				}&content=${info.remark ? info.remark : ''}`
			})
		},
		getBgColor(data) {
			return getItemColor(data)
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fafafa;
	min-height: 100%;
}
</style>
<style lang="scss" scoped>
.details {
	.header-bar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: #fff;
		padding-bottom: 38rpx;
		.date_m {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #1f2434;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
		}
		.date_w {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.active {
				border-radius: 64rpx;
				background-color: #1f2434;
				.text {
					color: #fff !important;
				}
				.num {
					background-color: #fff;
				}
			}
			.date-item {
				padding: 12rpx 6rpx 6rpx 6rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				text-align: center;
				.text {
					color: rgba(31, 36, 52, 0.8);
				}
				.num {
					width: 54rpx;
					height: 54rpx;
					margin-top: 10rpx;
					font-weight: 500;
					color: #1f2434;
					border-radius: 50%;
					background-color: #f3f4f7;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.container {
		padding: 48rpx;
	}
	.days_l {
		margin-top: 276rpx;
		.item {
			height: auto;
			.time {
				justify-content: flex-start !important;
			}
		}
	}
	.i_t {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tag {
			margin-top: 10rpx;
		}
	}
}
</style>
